<template>
  <div class="tabBar">
    <van-tabbar route :border='false' v-model="active" class="active_tab">
      <van-tabbar-item
        v-for="(item,index) in tabbars"
        :key="index"
        :safe-area-inset-bottom='true'
        :to='item.path'
        :replace='false'
        @click="tab(index)"
      >
        <span :class="currIndex == index ? active:''">{{ item.title }}</span>
        <div slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal">
        </div>
        <!-- <span v-if="index==4" class="news">3</span> -->
        <!-- <div :class="{fluctuation:index==currIndex}"  ref="indexAnmation"></div> -->
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {Tabbar, TabbarItem} from 'vant';

export default {
  data() {
    return {
      active: 0,
      currIndex: 0,
      tabbars: [
        {
          path: "/firstIndex",
          // path:undefined,
          title: "物业",
          normal: require("../assets/images/ic_tab_store.png"),
          active: require("../assets/images/ic_tab_store.png")
        },
        {
          path: undefined,
          title: "商城",
          normal: require("../assets/images/ic_tab_studio.png"),
          active: require("../assets/images/ic_tab_studio.png")
        },
        {
          // path:"/nearby",
          path: "/periphery",
          title: "附近",
          normal: require("../assets/images/ic_tab_saved.png"),
          active: require("../assets/images/ic_tab_saved.png")
        },
        {
          path: undefined,
          title: "家政",
          normal: require("../assets/images/ic_tab_sion.png"),
          active: require("../assets/images/ic_tab_sion.png")
        },
        {
          path: "/mine",
          title: "我的",
          normal: require("../assets/images/ic_tab_profile.png"),
          active: require("../assets/images/ic_tab_profile.png")
        },
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.tabbars.map((e, index) => {
        if (e.path == to.fullPath) {
          this.currIndex = index
          // this.$refs.indexAnmation[index].style.display = 'block'
        }
      })
    }
  },
  mounted() {
    this.tabbars.map((e, index) => {
      if (e.path == this.$route.path) {
        this.currIndex = index
        // this.$refs.indexAnmation[index].style.display = 'block'
      }
    })
  },
  methods: {
    tab(index) {
      if (index == 1) {
        window.location.href = "https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile"
      }
      if (index == 3) {
        window.location.href = "https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=33";
      }
    }
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
}
</script>
<style>
.van-tabbar-item__icon {
  margin: .1rem 0;
  z-index: 888;
}
</style>

<style scoped>
.van-tabbar {
  background-color: #57c5c6;
  height: 1.2rem;
}

.active_tab img {
  width: .48rem;
  height: .48rem;
}

.van-tabbar-item--active {
  background-color: lightslategray;
  color: #c2f4ea !important;
  font-weight: bold;
}

.van-tabbar-item {
  font-weight: bold;
}

.van-tabbar-item {
  position: relative;
  color: #fff;
}

.news {
  position: absolute;
  right: 20%;
  top: 15%;
  width: .3rem;
  height: .3rem;
  line-height: .3rem;
  background-color: red;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: .24rem;
  z-index: 888;
}

.fluctuation {
  background: #423f72;
  height: .8rem;
  width: 80%;
  border-radius: 50% 50% 0 0;
  position: absolute;
  top: -.2rem;
  left: .15rem;
  /* display: none; */
}
</style>
